<template>
	<view>
		<myline></myline>
		<view class="inptop">
			<view class="inptoptext">
				手机号:
			</view>
			<uni-easyinput class="inpp" trim="all" v-model="usertel" placeholder="输入手机号码" ></uni-easyinput>
		</view>
			
		<myline></myline>
		<view class="logtop">

			<view class="telbot">
				<view class="contel" @tap="submit">
					下一步
				</view>

			</view>
			<view class="tipc">
				继续注册表示您阅读并同意
				<view class="f-active-color">
					《约教易达APP服务协议》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myline from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				//收集手机号信息
				usertel: '',
				//手机号规则:
				rules: {
					usertel: {
						rule: /^1[3456789]\d{9}$/,
						msg: "请输入11为手机号"
					},
				}
			};
		},
		methods: {
			//校验规则:
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					uni.showToast({
						title: this.rules[key].msg,
						icon: "none"
					})
					bool = false;
					return bool;
				}
				return bool;
			},
			submit() {
				if (!this.validate('usertel')) {
					return
				}
				//发起注册请求:
				$http.request({
					url: "/registered",
					method: "POST",
					data: {
						phone: this.usertel,
					}
				}).then((res) => {
					if (res.success) {
						uni.navigateTo({
							url: `/pages/login-code/login-code?tel=${this.usertel}`
						})
					} else {
						uni.showToast({
							title: res.msg,
							mask: true,
							duration: 1500,
							icon: "fail"
						})
					}
				}).catch((err) => {
					console.log(err);
				})
				
			},

		},
		components: {
			myline
		}
	}
</script>

<style lang="scss">
	.inptop {
		display: flex;
		
		
		font-size: $uni-font-size-lg;
		.inptoptext{
			padding: 15rpx 0 ;
		}
		.inpp {
			width: 80%;
			padding: 10rpx;
		}
	}
	.telbot {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;

		.contel {
			padding: 20rpx 0 20rpx;
			border: 1rpx solid #282c35;
			border-radius: 40rpx;
			font-size: $uni-font-size-lg;
			width: 85%;
			text-align: center;
			background-color: #e43447;
			color: $uni-text-color-inverse;
		}
	}

	.tipc {
		margin-top: 20rpx;
		text-align: center;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
	}
</style>